<template>
  <div class="ProjectPartner-Container">
    <v-row no-gutters class="gap-8 mb-2">
      <v-col class="flex-grow-0">
        <v-icon @click="openSelectPartnerContractor" class="pointer">
          mdi-account-box
        </v-icon>
      </v-col>
      <v-col :cols="2">
        <v-select
          v-model="partnerContractor"
          :items="partnerContractorItems"
          clearable
          hide-details
          dense
          solo
          class="gray-input select-input"
          placeholder="Contractor"
        >
        </v-select>
      </v-col>
      <v-col :cols="2">
        <v-text-field
          v-model="partnerUserId"
          hide-details
          dense
          solo
          class="gray-input"
          placeholder="Type userId"
        >
        </v-text-field>
      </v-col>
      <v-col :cols="3">
        <v-text-field
          v-model="partnerCompanyName"
          hide-details
          dense
          solo
          class="gray-input"
          placeholder="Type company name"
        >
        </v-text-field>
      </v-col>
      <v-col :cols="2">
        <v-text-field
          v-model="partnerContactName"
          hide-details
          dense
          solo
          class="gray-input"
          placeholder="Type contact name"
        >
        </v-text-field>
      </v-col>
      <v-col :cols="2">
        <v-text-field
          v-model="partnerPhoneNumber"
          hide-details
          dense
          solo
          class="gray-input"
          placeholder="Type phone number"
        >
        </v-text-field>
      </v-col>
    </v-row>
    <v-row
      no-gutters
      class="gap-8 text-left mb-1"
      v-for="(item, index) in partnerList"
      :key="item.id"
    >
      <v-col class="flex-grow-0">
        <v-icon @click="deletePartner(index)" class="pointer">
          mdi-minus-circle
        </v-icon>
      </v-col>
      <v-col class="pl-3" :cols="2">
        <span> {{ item.contractor }} </span>
      </v-col>
      <v-col class="pl-3" :cols="2">
        <span> {{ item.userID }} </span>
      </v-col>
      <v-col class="pl-3" :cols="3">
        <span> {{ item.companyName }}</span>
      </v-col>
      <v-col class="pl-3" :cols="2">
        <span> {{ item.memberName }} </span>
      </v-col>
      <v-col class="pl-3" :cols="2">
        <span> {{ item.tel }} </span>
      </v-col>
    </v-row>
  </div>
</template>

<script lang="ts">
import { Vue, Component, PropSync } from "vue-property-decorator";
import { IPartner } from "@/components/Project/index";
@Component({
  props: {},
})
export default class ProjectPartner extends Vue {
  @PropSync("items", { type: Array, default: () => [] })
  syncedItems!: IPartner[];
  get partnerList(): IPartner[] {
    return this.syncedItems.filter((item) => {
      let validate = false;
      switch (this.partnerContractor) {
        case "Contractor":
          validate = item.contractor === "CON";
          break;
        case "Supplier":
          validate = item.contractor === "SUP";
          break;
        case "Member":
          validate = item.contractor === "MEM";
          break;
        default:
          validate = true;
      }
      if (
        item.userID.indexOf(this.partnerUserId) >= 0 &&
        item.companyName.indexOf(this.partnerCompanyName) >= 0 &&
        item.memberName.indexOf(this.partnerContactName) >= 0 &&
        item.tel.indexOf(this.partnerPhoneNumber) >= 0 &&
        validate
      ) {
        validate = true;
      } else {
        validate = false;
      }
      return validate;
    });
  }
  // project partner
  partnerContractor = "";
  partnerUserId = "";
  partnerCompanyName = "";
  partnerContactName = "";
  partnerPhoneNumber = "";
  //project partner data origin
  partnerContractorItems = ["Contractor", "Supplier", "Member"];

  openSelectPartnerContractor() {
    this.$emit("open");
  }

  deletePartner(index: number) {
    this.syncedItems.splice(index, 1);
  }
}
</script>

<style lang="scss" scoped>
@import "./ProjectPartner.scss";
</style>
